<template>
  <el-table
    :data="feedbackList"
    :default-sort="{ prop: 'afDate', order: 'descending' }"
    table-layout="fixed"
    style="height: 500px"
    @expand-change="expandChange"
  >
    <el-table-column type="index" label="序号" width="100" />
    <el-table-column
      prop="afDate"
      label="上报时间"
      :formatter="dateFormat"
      sortable
      align="center"
    />
    <el-table-column prop="province" label="上报省市区域" align="center" show-overflow-tooltip />
    <el-table-column prop="estimatedGrade" label="预估等级" align="center" sortable>
      <template #default="scope">
        <!--        1-2绿色 3-4 橙色 5-6 红色-->
        <el-tag v-if="scope.row.estimatedGrade < 3" type="success">
          {{ scope.row.estimatedGrade }}
        </el-tag>

        <el-tag v-else-if="scope.row.estimatedGrade < 5" type="warning">
          {{ scope.row.estimatedGrade }}
        </el-tag>
        <el-tag v-else-if="scope.row.estimatedGrade < 7" type="danger">
          {{ scope.row.estimatedGrade }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column type="expand">
      <template #default="scope">
        <el-descriptions class="table-expand" :column="1" size="large" border>
          <el-descriptions-item align="center">
            <template #label>
              <div class="label">
                <el-icon style="margin-right: 10px"><HomeFilled /></el-icon>
                详细位置
              </div>
            </template>
            <div>{{ scope.row.province }} /{{ scope.row.address }}</div>
          </el-descriptions-item>
          <el-descriptions-item align="center">
            <template #label>
              <div class="label">
                <el-icon style="margin-right: 10px"><AlarmClock /></el-icon>
                具体时间
              </div>
            </template>
            <div>{{ scope.row.afDate }}</div>
          </el-descriptions-item>
          <el-descriptions-item align="center">
            <template #label>
              <div class="label">
                <el-icon style="margin-right: 10px"><List /></el-icon>
                详细描述
              </div>
            </template>
            <el-tag size="large" style="font-weight: bold; font-size: 14px">{{
              scope.row.information
            }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="label">
                <el-icon style="margin-right: 10px"><Flag /></el-icon>
                处理进度
              </div>
            </template>
            <time-line></time-line>
          </el-descriptions-item>
        </el-descriptions>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { useAqiFeedbackStore } from '@/stores/aqi/aqiFeedback.js'
import { storeToRefs } from 'pinia'
import { AlarmClock, Flag, HomeFilled, List } from '@element-plus/icons-vue'
import TimeLine from '@/components/report/TimeLine.vue'

const aqiFeedbackStore = useAqiFeedbackStore()
const { feedbackList } = storeToRefs(aqiFeedbackStore)

const dateFormat = (row, column) => {
  //       返回格式化的列
  return row[column.property].substring(0, 10)
}

const expandChange = (row) => {
  aqiFeedbackStore.loadData(row)
}
</script>

<style scoped lang="scss">
.table-expand {
  margin-left: 50px;
  margin-right: 50px;
  .label {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
